<template>
  <!-- <div>害虫类型</div> -->
  <SubTitle>
        <template #subtitle>害虫类型</template>
      </SubTitle>
  <div ref="pesttype" class="pesttype">

</div>
</template>

<script>
import * as echarts from 'echarts'
import SubTitle from './SubTitle.vue';
export default {
    components:{
        SubTitle
    },
    mounted(){
        setTimeout(() => {
            let pesttype =  echarts.init(this.$refs.pesttype);
        let data = [
            {value:25,name:"夜蛾"},
            {value:20,name:"三化螟"},
            {value:10,name:"稻飞虱"},
            {value:15,name:"二化螟"}
        ]
        let option = {
            title:{
                text:"当月害虫类型占比",
            },
            legend:{
                left:"0",
                top:'25%',
                orient:'verical',
                color:'white'
            },
            series:{
                name:"",
                type:'pie',
                data:data,
                radius:["50%","70%"],
                label:{
                    show:true,
                    formatter:'{c}',
                    color:'white'
                }
            }
        };
        pesttype.setOption(option)
        }, 1);
    }
}
</script>

<style lang="less" scoped>
.pesttype{
    width: 100%;height: 290px;
}
@media screen and (max-width: 720px) {
    .pesttype{
      width: 100%;
      height: 300px;
    }
  }
</style>